﻿<template>
  <div>
    <sticky :className="'sub-navbar'">
      <div class="dvLeftFloat" style="">
        <span>评价类型：</span>
        <el-radio-group v-model="commentTypeText" size="mini" @change="clickCommentType">
          <el-radio-button :label=item.text v-for="item in listCommentType" :key="item.key" size="mini"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="filter-container">
        <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 200px;" class="filter-item" :placeholder="'名称'" v-model="listQuery.key" />
        <el-button size="mini" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      </div>
    </sticky>
    <div class="app-container ">
      <div class="bg-white">
        <el-table ref="mainTable" :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%;" @row-click="rowClick" @selection-change="handleSelectionChange">
          <el-table-column fixed min-width="220" :label="'商品信息'">
            <template slot-scope="scope">
              <div class="goods">
                <el-image style="width: 50px;height: 50px;" class="goodsImg" :src="scope.row.goodsUrlImageMain"></el-image>
                <div style="width:80%;display: inline-block;">
                  <span class="goodsName">{{ scope.row.goodsName }}</span><br />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="买家" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-avatar :size="50" :src="scope.row.urlAvater"></el-avatar>
              <div style="width:150;display: inline-block;">
                <span class="goodsName">{{ scope.row.nickName }}</span><br />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" class="c-p" prop="status" label="显示状态" show-overflow-tooltip width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" :active-value=10 :inactive-value=-10 @change="setStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="评分" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="content" label="评论内容" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="170" show-overflow-tooltip></el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="130" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" v-if="checkPermission('GoodsComment', 'btnEdit')" @click="openEdit(scope.row)">编辑</el-button>
              <el-button type="text" v-if="checkPermission('GoodsComment', 'btnDel')" @click="handleDelete([scope.row])">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleCurrentChange" />
      </div>
    </div>
    <EditForm ref="EditForm" @handleSubmit="loadList" />
  </div>
</template>

<script>
import * as apiGoodsComment from '@/api/goods/goodscomment'
import apiEnums from '@/api/comm/enumList'
import Sticky from '@/components/Sticky'
import Pagination from '@/components/Pagination'
import EditForm from './modules/EditForm'
export default {
  components: { Sticky, EditForm, Pagination },
  directives: {},
  data() {
    return {
      multipleSelection: [], // 列表checkbox选中的值
      tableKey: 0,
      commentTypeText: '全部',
      listCommentType: [], //评价类型
      list: null,
      total: 0,
      listLoading: true,
      listQuery: { // 查询条件
        page: 1,
        limit: 20,
        key: undefined,
      }
    }
  },
  created() {
    new Promise((resolve, reject) => {
      Promise.all([
        apiEnums.listCommentType(true).then((data) => {
          this.listCommentType = data
        }),
      ]).then(() => {
        this.loadList()
      })
    })
    this.loadList()
  },
  methods: {
    //选择状态
    clickCommentType() {
      var commentType = this.listCommentType.filter(
        (p) => p.text == this.commentTypeText
      ).value
      this.listQuery.commentType = commentType
      this.loadList()
    },
    rowClick(row) {
      this.$refs.mainTable.clearSelection()
      this.$refs.mainTable.toggleRowSelection(row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    loadList() {
      this.listLoading = true
      apiGoodsComment.load(this.listQuery).then(res => {
        this.list = res.result
        this.total = res.count
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.loadList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.loadList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val.page
      this.listQuery.limit = val.limit
      this.loadList()
    },
    // 打开编辑框
    openEdit(row) {
      this.$refs.EditForm.show(row)
    },
    handleDeleteArr() {//列表选中删除
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: '至少删除一个',
          type: 'error'
        })
        return
      }
      this.handleDelete(this.multipleSelection)
    },
    handleDelete(rows) { // 多行删除
      apiGoodsComment.del(rows.map(p => p.id)).then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        rows.forEach(row => {
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
        })
      })
    },

  }
}
</script>
<style scoped>
.dialog-mini .el-select {
  width: 100%;
}

.goodsName {
  float: left;
  margin-left: 10px;
  color: #2656bd;
  font-style: 12px;
}
</style>
